
    <script type="text/html" template>
        <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
        <link rel="stylesheet" href="{{ layui.setter.base }}style/css/maintain/Change-order.css">
        <link rel="stylesheet" href="{{ layui.setter.base }}style/autoComplete.css">
        <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_device_alert.css">
    </script>
    <title>故障报修-新增报修</title>
    <div class="content layui-fluid leon-fluid">
        <form class="layui-form" lay-filter="layuiadmin-form-project" id="layuiadmin-form-project">
            <div class="layui-fluid" id="gdInfo">
                <div class="layui-title">新增报修工单</div>
                <ul class="layui-row layui-fluid">
                    <li class="layui-col-sm4 layui-col-md4 layui-form">
                        <div class="input-box layui-form-item">
                            <label class="layui-form-label">工单编号:</label>
                            <div class="layui-input-block readOnly">
                                <input type="text" name="fil01" readonly required lay-verify="required" placeholder=""
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="input-box layui-form-item">
                            <label class="layui-form-label">报修时间:</label>
                            <div class="layui-input-block readOnly">
                                <input type="text" name="fil10" readonly required lay-verify="required" placeholder=""
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </li>
                    <li class="layui-col-sm4 layui-col-md4 layui-form">
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label"><span style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span>紧急程度:</label>
                            <div class="layui-input-block">
                                <input type="radio" name="fil06" value="0" title="正常">
                                <input type="radio" name="fil06" value="1" title="重要">
                                <input type="radio" name="fil06" value="2" title="紧急">
                            </div>
                        </div>
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label" style="padding-left:8px;">报修人:</label>
                            <div class="layui-input-block readOnly">
                                <input type="text" name="fil08" readonly required lay-verify="required" placeholder=""
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </li>
                    <li class="layui-col-sm4 layui-col-md4 layui-form">
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label"><span style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span>工单名称:</label>
                            <div class="layui-input-block">
                                <input type="text" name="tcReqName" required lay-verify="required" placeholder=""
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label" style="padding-left:8px;">联系人电话</label>
                            <div class="layui-input-block readOnly">
                                <input type="text" name="gen08" readonly required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="layui-fluid" id="sbInfo">
                <div class="layui-title">设备信息</div>
                <ul class="layui-row layui-fluid">
                    <li class="layui-col-sm4 layui-col-md4 layui-form">
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label">
                                <span style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span>设备编号:</label>
                            <div class="layui-input-block completeWrap">
                                <input name="fil03" id="fil03" value="" autocomplete="off" class="layui-input" required
                                    lay-verify="required" />
                            </div>
                        </div>
                        <div class="input-box layui-form-item">
                            <label class="layui-form-label" style="padding-left:8px;">设备系列:</label>
                            <div class="layui-input-block readOnly">
                                <span name="tcSeriesName" id="tcSeriesName"></span>
                            </div>
                        </div>
                    </li>
                    <li class="layui-col-sm4 layui-col-md4 layui-form">
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label">设备类型:</label>
                            <div class="layui-input-block readOnly">
                                <span name="fic02" id="Equipment"></span>
                            </div>
                        </div>
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label">设备型号:</label>
                            <div class="layui-input-block readOnly">
                                <span name="fii02" id="fii02"></span>
                            </div>
                        </div>
                    </li>
                    <li class="layui-col-sm4 layui-col-md4 layui-form">
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label">供应商:</label>
                            <div class="layui-input-block readOnly">
                                <span name="pmc081" id="pmc081"></span>
                            </div>
                        </div>
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label">设备位置:</label>
                            <div class="layui-input-block readOnly">
                                <span name="tcFiaPlace" id="tcFiaPlace"></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="layui-fluid">
                <div class="layui-title">故障信息</div>
                <ul class="layui-row layui-fluid ">
                    <li class="layui-col-sm4 layui-col-md4 layui-form">
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label"><span style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span>故障发生时间:</label>
                            <div class="layui-input-block">
                                <input type="text" name="fil12" id="happenTime" required lay-verify="required"
                                    placeholder="" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </li>
                    <li class="layui-col-sm4 layui-col-md4 layui-form">
                        <div class="input-box  layui-form-item">
                            <label class="layui-form-label"><span style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span>是否停机:</label>
                            <div class="layui-input-block">
                                <input type="radio" name="tcReqIsstop" value="0" title="是">
                                <input type="radio" name="tcReqIsstop" value="1" title="否">
                            </div>
                        </div>
                    </li>
                    <li class="layui-col-sm4 layui-col-md4 layui-form">
                        <div class="input-box  layui-form-item updateFileWrap">
                            <label class="layui-form-label">附件:</label>
                            <div class="layui-input-block">
                                <div class="layui-upload-drag" id="updateFile" >
                                    <p>点击上传，或将文件拖拽到此处</p>
                                    <div class="layui-progress" lay-filter="uploadFile" lay-showPercent="yes">
                                        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
                                    </div>
                                    <div class="layui-upload-list layui-hide" id="uploadDemoView">
                                        <table class="layui-table" lay-size="sm">
                                            <thead>
                                                <tr>
                                                    <th>文件名</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody id="demoList"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="pd  layui-col-sm12 layui-col-md12 layui-form">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label"><span style="font-size: 18px;color: red;position: relative;display: inline-block;line-height: 20px;vertical-align: middle;top:3px;">*</span>故障说明:</label>
                            <div class="layui-input-block">
                                <textarea name="fil21" placeholder="故障说明" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="layui-btn-containner">
                <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-submit
                    lay-filter="saveEdit">提交</button>
                <button class="btn3 cancel-btn layui-btn layui-btn-radius layui-btn-primary">取消</button>
            </div>
        </form>
    </div>
    <!-- 弹出层 -->
    <script type="text/html" id="addDeviceTpl">
        <div class="leon-style-alert">
            <div class="layui-alert-box">
                <div class="layui-alert-title">
                <span class="layui-title-inner">选择设备</span>
                <span class="layui-title-screen">
                <div class="screen-btn">
                    <form class="layui-form" action="">
                        <input type="search" name="keyWord" class="search-blank-inner searchInput" placeholder="搜索" autocomplete="off"/>
                        <button type="button" lay-submit lay-filter="queryTableDeviceHeader" class="search-blank-icon"></button>
                    </form>
                </div>
                </span>
                </div>
                <div class="layui-content">
                <div class="con1 toggle-btn">
                    <span class="screen">
                    <i class="query-icon  layui-icon"></i>
                    <span class="query-inner">查询条件</span>
                    </span>
                    <i class="icon layui-icon layui-icon-down"></i>
                </div>
                <div class="con2 toggle-content">
                    <form action="" class="layui-form">
                    <label for="">设备编号:</label>
                    <input type="text" name="fia01" />
                    <label for="">设备类型:</label>
                    <input type="text" name="fic01" />
                    <label for="">设备型号:</label>
                    <input type="text" name="fii01" />
                    <button type="button" lay-submit lay-filter="queryTableDevice"
                        class="query layui-btn layui-btn-radius layui-btn-primary">
                        <span class="search-icon"></span>
                        <span class="btn-inner">查询</span>
                    </button>
                    </form>
                </div>
                <table class="layui-table" id="MachineCapacityTable"></table>
                </div>
                <div class="footer layui-btn-containner">
                <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="queryTableDevice2">确定</button>
                <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
                </div>
            </div>
        </div>
    </script>

    <script>
        ! function () {
            var $ = layui.$;
            layui.use(['form', 'table', 'api', 'utill', 'admin', 'view', 'laydate', 'upload', 'setter'], function() { //此段代码必不可少
                var table = layui.table,
                    setter = layui.setter,
                    laytpl = layui.laytpl,
                    api = layui.api,
                    utill = layui.utill,
                    form = layui.form,
                    element = layui.element,
                    laypage = layui.laypage,
                    form = layui.form,
                    laydate = layui.laydate,
                    upload = layui.upload,
                    view = layui.view;

                form.render();

                laydate.render({
                    elem: '#createTime'
                    , type: 'datetime'
                });
                laydate.render({
                    elem: '#happenTime'
                    , type: 'datetime'
                });
                var _DATA = {
                    files: []
                }
                var local = layui.sessionData(setter.tableName);
                var tokenName = setter.request.tokenName;
                var token = local[tokenName];
                var tokenObj = {};
                tokenObj[tokenName] = token;
                upload.render({
                    elem: '#updateFile'
                    ,url: api.host+api.gzbx.FilFileWxReturnAccessory
                    ,type: 'POST'
                    ,headers: tokenObj
                    ,multiple: false
                    ,accept: 'file'
                    ,number: 1
                    ,progress: function(n, elem){
                        var percent = n + '%' //获取进度百分比
                        element.progress('uploadFile', percent); //可配合 layui 进度条元素使用
                    }
                    ,before: function(obj){
                        utill.loading.show();
                    }
                    , done: function (res, index, upload) {
                        if (res) { //上传成功
                            var _TPL = '';
                            res.forEach(function(item, index){
                                _TPL = $(['<tr id="upload-'+ index +'">'
                                ,'<td>'+ item.tcFileName +'</td>'
                                ,'<td>'
                                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                ,'</td>'
                                ,'</tr>'].join(''));
                                
                                if (  $("#demoList").children().length > 0 ) {
                                    layer.open({
                                        content: '只能上传一个文件，点击确定覆盖上一个文件？',
                                        btnAlign: 'c',
                                        btn: ['确定', '取消'],
                                        yes: function(index, layors){
                                            $('#demoList').html(_TPL);
                                            layer.close(index)
                                        },
                                        cancel: function(index, layors){
                                            layer.close(index)
                                        }
                                    })
                                }else {
                                    $('#demoList').html(_TPL)
                                }
                                $('#uploadDemoView').removeClass('layui-hide');
                            })
                            _DATA.files = res;
                            utill.loading.hide();
                            //删除
                            _TPL.find('.demo-delete').on('click', function (e) {
                                var idx = $(this).index();
                                e.stopPropagation()
                                _DATA.files.splice(idx, 1); //删除对应的文件
                                element.progress('uploadFile', 0);
                                if ( _DATA.files.length == 0 ) {
                                    $('#uploadDemoView').addClass('layui-hide');
                                }
                                _TPL.remove();
                            });
                        }
                    }
                    , error: function (index, upload) {
                    }
                });
                var add = function () {
                    utill.loading.show();
                    view.req({
                        url: api.host + api.gzbx.FilFileWxInsertRepairs,
                        type: 'POST'
                    }).done(function (res) {
                        utill.loading.hide();
                        if (res.code == 0) {
                            var data = res.data;
                            // 组装编辑数据
                            for (var key in data) {
                                if ($('#gdInfo').find('[name="' + key + '"]').length > 0) {
                                    $('#gdInfo').find('[name="' + key + '"]').val(data[key]);
                                    form.render();
                                }
                            }
                        }

                    })
                }
                add();
                
                $("#fil03").click(function(){
                    layer.open({
                        type: 1,
                        title: false,
                        area: ["662px", "536px"],
                        fixed: true,
                        shadeClose: true,
                        closeBtn: 0,
                        content: $("#addDeviceTpl").html(),
                        success: alertEvent.addDevice
                    });
                })
                // utill.fuzzmatch('#fil03', {
                //     isShowValue: false,
                //     reqObj: {
                //         url: api.host + api.gzbx.selectFiaDetail,
                //         type: 'POST'
                //     },
                //     dataTrans: function (res) {
                //         return res.data.map((item) => {
                //             return {
                //                 label: item.fia01,
                //                 value: item.fia01,
                //                 data: item
                //             }
                //         })
                //     },
                //     click: function (item) {
                //         var data = item.data;
                //         // 组装编辑数据
                //         for (var key in data) {
                //             if ($('#sbInfo').find('[name="' + key + '"]').length > 0) {
                //                 $('#sbInfo').find('[name="' + key + '"]').html(data[key]);
                //                 form.render();
                //             }
                //         }
                //     }
                // });

                // 提交
                form.on('submit(saveEdit)', function (data) {
                    var baseData = data.field;
                    var opts = {
                        tcEamFile: _DATA.files
                    }
                    opts = $.extend({}, opts, baseData);
                    var val = $('input:radio[name="fil06"]:checked').val();
                    var val2 = $('input:radio[name="tcReqIsstop"]:checked').val();
                    if(val == null || val == ""){
                        layer.msg("请选择一个紧急程度");
                        return false
                    }
                    if(val2 == null || val2 == ""){
                        layer.msg("请选择一个是否停机");
                        return false
                    }
                    utill.loading.show();
                    view.req({
                        url: api.host + api.gzbx.FilFileWxInsertSubmit,
                        type: 'POST',
                        data: JSON.stringify(opts),
                        contentType: 'application/json',
                    }).done(function (res) {
                        utill.loading.hide();
                        if (res.code == "0") {
                            setTimeout(function () {
                                location.hash = '/maintain/google'
                            }, 1000);
                        }
                        layer.msg(res.message)
                    })
                    return false;
                })
               var alertEvent = {
                   addDevice: function (layero, index) {
                       table.render(
                            $.extend({}, utill.tableOpts(), {
                            elem: "#MachineCapacityTable",
                            id: "#MachineCapacityTable",
                            height: 300,
                            toolbar: "",
                            url: api.host + api.gzbx.selectFiaDetail,
                            type: 'post',
                            cols: [
                                [
                                { fixed: "left", type: "radio" },
                                { field: "fia01", title: "设备编号" },
                                { field: "fic02", title: "设备类型" },
                                { field: "fii02", title: "设备型号" },
                                { field: "pmc081", title: "供应商" }
                                ]
                            ]
                        })
                      );
                    // 查询显示和隐藏
                    $('.leon-style-alert .con1').click(function(){
                      $('.con2').toggle();
                    })
                    // 条件查询
                    form.on("submit(queryTableDevice)", function (data) {
                        var allData = data.field;
                        table.reload("#MachineCapacityTable", {
                        where: allData
                        });
                        return false;
                    });
                    // 关键字查询
                    form.on("submit(queryTableDeviceHeader)", function (data) {
                        var allData2 = data.field;
                        table.reload("#MachineCapacityTable", {
                        where: allData2
                        });
                        return false;
                    });
                    // 选择一个 
                    form.on("submit(queryTableDevice2)", function (data) {
                       var res = table.checkStatus("#MachineCapacityTable").data;
                       var fia01 = res[0].fia01;
                       layer.closeAll();
                       $("#fil03").val(fia01);
                       $("#Equipment").html(res[0].fic02);
                       $("#pmc081").html(res[0].pmc081);
                       $("#fii02").html(res[0].fii02);
                       $("#tcSeriesName").html(res[0].tcSeriesName);
                       $("#tcFiaPlace").html(res[0].tcFiaPlace);
                    });
                    // 点击取消关闭
                    $(".btn2").click(function(){
                        layer.closeAll();
                    })
                   }
               }
            });
            // 关闭
            $('[data-jump="maintain/google"]').addClass('layui-this');
            $('.cancel-btn').attr('lay-href', 'maintain/google');
        }();
    </script>
    <style scoped>
        .updateFileWrap .layui-col-md3>div,
        .layui-col-md4>div {
            height: auto;
        }

        .updateFileWrap .layui-form-label {
            height: auto;
            float: left;
        }

        .updateFileWrap .input-box>.layui-input-block {
            height: auto;
        }

        .updateFileWrap .layui-upload-drag {
            padding: 10px;
        }

        .readOnly input {
            border: 0;
        }
        .layui-form-radio{
            margin: 0px;
            line-height: 27px;
        }
    </style>
</body>

</html>